<template>
  <div>
    <!-- 标题 -->
    <div class="titles">
      <h2>学习成果认定审核</h2>
    </div>
    <!-- 功能区域 -->
    <div id="margins" class="header">
      <!-- 查询 -->
      <span id="title" class="interval">学院：</span>
      <el-select  v-model="params.departmentId" placeholder="请选择学院" @change="majors()">
        <el-option v-for="de in department" :Key="de.departmentId" :label="de.departmentName"
          :value="de.departmentId"></el-option>
      </el-select>
      <span id="title" class="interval">专业：</span>
      <el-select v-model="params.majorId" placeholder="请选择专业">
        <el-option v-for="item in major" :Key="item.majorId" :label="item.majorName" :value="item.majorId"></el-option>
      </el-select>

      <span id="title" class="interval">年级：</span>
      <el-input class="inline" v-model="params.enrTime" placeholder="请输入年级（入学年份）"></el-input>
      <span id="title" class="interval">班级：</span>
      <el-input class="inline" v-model="params.stuClass" placeholder="请输入班级(阿拉伯数字)"></el-input>
      <el-button type="primary" @click="findBySearch()" size="small" class="interval">查询</el-button>
      <el-button style="margin-left:5px" type="danger" @click="reset" size="small">重置</el-button>
    </div>
    <!-- 列表 -->
    <div class="list" id="margins">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
        <el-table-column prop="subTime" label="提交时间" align="center" width="100"></el-table-column>
        <el-table-column prop="s_number" label="学号" align="center" width="140"></el-table-column>
        <el-table-column prop="nickname" label="姓名" align="center" width="100"></el-table-column>
        <el-table-column prop="enrTime" label="年级" align="center"> </el-table-column>
        <el-table-column prop="departmentName" label="学院" align="center"></el-table-column>
        <el-table-column prop="majorName" label="专业" align="center"></el-table-column>
        <el-table-column prop="stuClass" label="班级" align="center"></el-table-column>
        <el-table-column prop="achievement_type.type_name" label="成果类别" align="center"></el-table-column>
        <el-table-column prop="describe" label="申请描述" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="uploadFile" label="证明材料" align="center">
          <template v-slot="scope">
            <el-link :href="'http://localhost:8015/user/' + scope.row.uploadFile"
              v-if="scope.row.uploadFile">点击下载</el-link>
            <span v-else style="color: #ccc;">暂无</span>
          </template>
        </el-table-column>
        <el-table-column prop="scores" label="赋分" align="center" width="80"></el-table-column>
        <el-table-column prop="outcome" label="审核状态" align="center" width="130">
          <template slot-scope="scope">
            <span v-show="scope.row.outcome == 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
            <span v-show="scope.row.outcome == 1">审批中</span>
            <span v-show="scope.row.outcome == 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="250">
          <template slot-scope="scope">

            <el-button type="primary" @click="
              passAudit1(scope.row.id, scope.row.s_number,)" size="small"
              :disabled="scope.row.outcome == 1 ? false : true">通过
            </el-button>

            <el-button type="danger" size="small" @click="failAudit1(scope.row.id)"
              :disabled="scope.row.outcome == 1 ? false : true">驳回</el-button>
          </template>

        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="params.pageNum" :page-sizes="[10, 15, 20]" :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
      <!-- 弹窗 -->
      <el-dialog class="demoRuleForm" :title="DialogTitle" :visible.sync="Dialog" center>
        <el-form :model="ruleForm" status-icon ref="ruleForm" :label-width="LabelWidth" size="200">
          <el-form-item style="margin: 0px  auto;" label="赋分:" prop="scores1" class="inputs" v-show="this.sure == '通过'">
            <el-input v-model="ruleForm.scores"></el-input>
          </el-form-item>
          <el-form-item label="驳回理由:" prop="reason" class="inputs" v-show="this.sure == '不通过'" label-width="120PX">
            <textarea cols="55" rows="20" v-model="ruleForm.reason"></textarea>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="Dialog = false">取 消</el-button>
          <el-button type="primary" v-show="this.sure == '通过'" @click="passAudit('ruleForm')">确定赋分</el-button>
          <el-button type="primary" v-show="this.sure == '不通过'" @click="failAudit('ruleForm')">确定驳回</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { pagingAffirm, affirmAchievementPass, affirmAchievementFail } from "@/api/admin/achievement_typeAPI";
import { getInfo, getDepartments, getMajorsByDepartmentId } from "@/api/user";
export default {
  data() {
    return {
      user: [],
      department: [], //学院数据
      major: [], // 专业数据
      //专业下拉框
      Major: [],
      //学院下拉框
      Departments: [],

      // 弹窗显示状态
      Dialog: false,
      DialogTitle: "",
      //弹窗提交的数据
      ruleForm: {},
      //区分通过与不通过弹窗
      sure: "",
      //分页
      params: {
        majorId: null,
        departmentName: "",
        majorName: "",
        enrTime: '',
        stuClass: "",
        pageNum: 1,
        pageSize: 10,
      },
      // 总共信息条数
      total: 0,
      // 成果认定列表
      tableData: [],
      //添加类别信息宽度
      LabelWidth: "50px",
    };
  },
  created() {
    this.users();
  },
  methods: {
    // 获取学院数据方法
    departmentData() {
      getDepartments().then(res => {
        this.department = res.data
      })
    },
    // 获取专业数据
    majors() {
      this.params.majorId = null;
      getMajorsByDepartmentId(this.params.departmentId).then(res => {
        this.major = res.data

      })


    },
    // 用户信息
    users() {
      getInfo().then(res => {
        this.user = res.data;
        this.findBySearch();
      })
    },
    // 认可审核弹框（通过）
    passAudit1(id, username) {
      this.ruleForm = {};
      this.sure = "通过";
      this.ruleForm.id = id;
      this.ruleForm.username = username;
      this.ruleForm.outcome = 2;
      this.ruleForm.t_number = this.user.nickname;
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = String(currentDate.getMonth() + 1).padStart(2, "0");
      const day = String(currentDate.getDate()).padStart(2, "0");
      this.ruleForm.reviewTime = `${year}-${month}-${day}`;
      this.Dialog = true;
      this.DialogTitle = "赋分";
    },
    // 认可审核弹框（不通过）
    failAudit1(id, outcome) {
      this.ruleForm = {};
      this.sure = "不通过";
      this.ruleForm.id = id;
      this.ruleForm.outcome = 0;
      this.ruleForm.t_number = this.user.nickname;
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = String(currentDate.getMonth() + 1).padStart(2, "0");
      const day = String(currentDate.getDate()).padStart(2, "0");
      this.ruleForm.reviewTime = `${year}-${month}-${day}`;
      this.ruleForm.outcome = 0;
      this.Dialog = true;
      this.DialogTitle = "驳回理由";

    },
    // 审核状态（通过）
    passAudit() {
      console.log("this.ruleForm", this.ruleForm)
      affirmAchievementPass(this.ruleForm).then((res) => {
        console.log("res", res);
        if (res.code == 200) {
          // 给 申请表单中的 日期 添加当前日期
          this.Dialog = false;
          this.findBySearch();
        }
      });
    },

    // 审核状态（不通过）
    failAudit() {
      affirmAchievementFail(this.ruleForm).then((res) => {
        if (res.code == 200) {
          this.Dialog = false;
          this.findBySearch();
        }
      });
    },

    //审核状态
    auditStatus(row, column) {
      if (row.outcome == 0) {
        return "未通过";
      } else if (row.outcome == 1) {
        return "待审核";
      } else if (row.outcome == 2) {
        return "通过";
      }
    },

    //分页查询
    findBySearch() {
      pagingAffirm({
        departmentId: this.params.departmentId,
        majorId: this.params.majorId,
        enrTime: this.params.enrTime,
        stuClass: this.params.stuClass,
        pageNum: this.params.pageNum,
        pageSize: this.params.pageSize,
      }).then((res) => {
        if (res.code === 200) {
          console.log("学习成果", res.data.list);
          //给列表渲染数据
          this.tableData = res.data.list;
          // 数据总条数
          this.total = res.data.total;
          this.departmentData();
        }
      });
    },
    handleSizeChange(pagesize) {
      this.params.pageSize = pagesize;
      this.findBySearch();
    },
    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.findBySearch();
    },
    // 清空查询
    reset() {
      this.ruleForm = {},
        this.params = {
          majorId: null,
          enrTime: "",
          stuClass: "",
          pageNum: 1,
          pageSize: 10,
        };
      this.findBySearch();
    },

  },
};
</script>

<style>
/* 分页样式 */
.paging {
  padding-top: 30px;
  text-align: right;
}

/* 搜索框样式 */
.inline {
  width: 200px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

/* 列表样式 */
.list {
  /* margin-right: auto; */
  /* width: 70%; */
}

/* 弹窗样式 */
.demoRuleForm {
  width: 1200px;
  margin: 0px auto;
}

/* 添加类别输入框样式 */
.inputs {
  width: 250px;
}

/* 字体样式 */
.interval {
  margin-left: 10px;
}
</style>

